<template>
  <div class="my-promulgator-mangae">
    <c-title text="技能管理"></c-title>
    <van-tabs v-model="active" color="#4978F8" title-active-color="#4978F8" @click="handle">
      <van-tab title="已上架" :name="1"></van-tab>
      <van-tab title="待审核" :name="0"></van-tab>
      <van-tab title="审核驳回" :name="-1"></van-tab>
    </van-tabs>
    <div class="list">
      <router-link tag="div" :to="fun.getUrl('anytimeSkillMasterRelease', {}, { id: item.id })" v-for="item in list"
        :key="item.id"  class="box">
        <div class="list-item">
          <van-image width="6.8125rem" height="6.8125rem" style="border-radius: 0.25rem; overflow: hidden;"
            :src="item.pic_url" />
          <div class="item-right">
            <p class="title">{{ item.title }}</p>
            <p class="content">{{ item.has_one_category && item.has_one_category.title }} | {{ item.desc }}</p>
            <p class="sold">已售{{ item.service_order_num }}</p>
            <div style="margin-top: 0.5625rem; color: #ff9c43;">
              <span>{{ $i18n.t('money') }}</span><span class="fz32 fw-500">{{ item.fee }}/次</span>
            </div>
          </div>
        </div>
        <p class="reason" v-if="active == -1">
          <span style="flex-shrink: 0;">驳回原因:</span>
          <span style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">{{ item.reason }}</span>
        </p>
      </router-link>
    </div>

    <div class="btn" :class="{ 'isPcBtn': fun.isPc() }">
      <van-button block round color="#4978F8" @click="submit">技能发布</van-button>
    </div>
  </div>
</template>

<script>
import { scrollMixin } from "../../../../../utils/mixin";
import { Image as VanImage } from 'vant';
export default {
  mixins: [scrollMixin],
  components: { VanImage },
  data() {
    return {
      active: 1,

      isLoadMore: true,
      page: 1,
      last_page: 1,
      list: [],

    };
  },
  async activated() {
    await this.check_apply();
    this.isLoadMore = true;
    this.getData();
  },
  methods: {
    async check_apply() {
      let { result, msg, data } = await $http.get("plugin.be-within-call.frontend.role-apply.detail", { role: 2 }, '');
      if (result) {
        if (data.apply_status !== 1) {
          this.$router.push(this.fun.getUrl("anytimeRoleApply", { apply_for_type: 2 }))
        }
      } else {
        this.$toast(msg);
      }
    },
    handle() {
      this.getData()
    },
    getMoreData() {
      this.isLoadMore = false;
      if (this.page >= this.last_page) {
        return;
      }
      let page = this.page + 1;
      this.getData(page);
    },
    getData(page = 1) {
      let json = {
        page,
        state: this.active
      }
      $http.get("plugin.be-within-call.frontend.shi-fu.ability", json, '').then(({ result, msg, data }) => {
        this.isLoadMore = true;
        if (result) {
          this.page = data.current_page;
          this.last_page = data.last_page;
          (page == 1) ? (this.list = data.data) : (this.list = this.list.concat(data.data));
        } else {
          this.$toast(msg);
        }
      })
    },
    submit() {
      this.$router.push(this.fun.getUrl('anytimeSkillMasterRelease'))
    }
  }
};
</script>

<style scoped lang="scss">
.isPcBtn {
  width: 375px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.my-promulgator-mangae {
  padding-bottom: 6.25rem;

  .reason {
    margin-top: 0.5rem;
    text-align: left;
    background: #fff;
    color: #797979;
    display: flex;
    overflow: hidden;
  }

  .box {
    background: #fff;
    margin: 0.5rem 0;
    padding: 0.75rem;
  }

  .btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 0.625rem 0.75rem;
  }

  .list-item {
    background: #fff;
    display: flex;
  }

  .item-right {
    margin-left: 0.375rem;
    flex: 1;
    padding-top: 0.4063rem;
    text-align: left;
  }

  .title {
    font-size: 0.9rem;
  }

  .fw-500 {
    font-weight: 500;
  }

  .content {
    color: #999;
    font-size: 0.9rem;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
  }

  .sold {
    color: #999;
    font-size: 0.9rem;
  }

  .flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .fz32 {
    font-size: 1.1rem;
  }

  .time {
    background: #ffeedf;
    color: #ff9c43;
    font-size: 0.75rem;
    padding: 0.3125rem 0.375rem;
  }
}
</style>
